<template>
  <div id="app">
    <header class="header">
      <h1 class="logo">我的网盘</h1>
      <nav>
        <el-button class="login-button" type="primary" @click="centerDialogVisible = true">去登录</el-button>
      </nav>
    </header>

    <main class="main">
      <div class="content">
        <h2 class="title">记住每一份热爱</h2>
        <p class="subtitle">让美好永远陪伴</p>
        <p class="description">为你电脑/手机中的文件提供云备份、预览、分享等服务，帮你更快捷安全地管理数据。</p>
      </div>
    </main>

    <el-dialog v-model="centerDialogVisible" width="500" center>
      <!-- 选择登录方式 -->
      <div class="button-group">
        <el-button type="link" @click="showLogin('account')">账号登录</el-button>
        <el-button type="link" @click="showLogin('phone')">手机号登录</el-button>
        <el-button type="link" @click="showLogin('forgetPassword')">忘记密码</el-button>
        <el-button type="link" @click="showLogin('register')">注册</el-button>
      </div>
      <!-- 账号登录弹框  -->
      <div v-show="activeLogin === 'account'">
        <el-form :model="loginForm" ref="form" :rules="usernameRules">
          <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="loginForm.authCode" placeholder="请输入验证码" style="width: 280px;"></el-input>
            <img :src="imgData" @click="getAuthCode" alt="真人验证码" style="width: 100px; height: 32px">
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleLogin">登 录</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </span>
      </div>

      <!-- 手机号登录弹框  -->
      <div v-show="activeLogin === 'phone'">
        <el-form :model="phoneForm" ref="form" :rules="phoneRules">
          <el-form-item label="手机号" prop="phone">
            <el-input type="text" v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="phoneForm.phoneCode" placeholder="请输入验证码" style="width: 300px;"></el-input>
            <el-button type="primary" @click="getPhoneCode">获取验证码</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleLogin">登 录</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </span>
      </div>
      <!-- 忘记密码弹框  -->
      <div v-show="activeLogin === 'forgetPassword'">
        <el-form :model="forgetPasswordForm" ref="form" :rules="forgetPasswordRules">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="forgetPasswordForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="forgetPasswordForm.phoneCode" placeholder="请输入验证码"
                      style="width: 300px;"></el-input>
            <el-button type="primary" @click="getPhoneCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="forgetPasswordForm.password" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="forgetPasswordForm.rePassword" placeholder="请确认新密码"></el-input>
          </el-form-item>
          <el-button type="primary" @click="handleForgetPassword">提交</el-button>
        </el-form>
      </div>
      <!-- 注册弹框  -->
      <div v-show="activeLogin ==='register'">
        <el-form :model="registerForm" ref="form" :rules="registerRules">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="registerForm.phoneCode" placeholder="请输入验证码" style="width: 300px;"></el-input>
            <el-button type="primary" @click="getPhoneCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
            <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleRegister">注 册</el-button>
            <el-button @click="handleCancel">取 消</el-button>
          </span>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import router from '@/router';
import {inject, ref} from 'vue';
import axios from "@/utils/request.js";

let $message = inject('$message');

const centerDialogVisible = ref(false);
const activeLogin = ref('account'); // 当前展示的登录方式

const loginForm = ref({username: 'lcc', password: 'w2M1gD1cxJ', authCode: 'bkev'});
const phoneForm = ref({phone: '15735889031', phoneCode: '1234'});
const forgetPasswordForm = ref({
  phone: '15735889031',
  phoneCode: '1234',
  password: 'w2M1gD1cxJ',
  rePassword: 'w2M1gD1cxJ'
});
const registerForm = ref({
  phone: '15735889031',
  phoneCode: '1234',
  username: 'lcc',
  password: 'w2M1gD1cxJ',
  rePassword: 'w2M1gD1cxJ'
});
let imgData = ref('');

const usernameRules = {
  username: [{required: true, message: '请输入账号', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
  authCode: [{required: true, message: '请输入验证码', trigger: 'blur'}]
};
const phoneRules = {
  phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
  code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
};
const forgetPasswordRules = {
  phoneCode: [{required: true, message: '请输入验证码', trigger: 'blur'}],
  password: [{required: true, message: '请输入新密码', trigger: 'blur'}],
  rePassword: [{required: true, message: '请确认新密码', trigger: 'blur'}]
};
const registerRules = {
  phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
  authCode: [{required: true, message: '请输入验证码', trigger: 'blur'}]
};

const showLogin = (type) => {
  console.log('切换登录方式:', type);
  activeLogin.value = type; // 切换登录方式
}

const handleCancel = () => {
  centerDialogVisible.value = false;
}

function getAuthCode() {
  axios.get('/code/getAuthCode', {responseType: 'blob'})
      .then(response => {
        imgData.value = URL.createObjectURL(response);
      })
      .catch(error => {
        $message.error('获取验证码失败');
      });
}

function getPhoneCode() {
  axios.get('/code/getPhoneCode', {responseType: 'blob', params: {phone: phoneForm.value.phone}})
      .then(response => {
        imgData.value = URL.createObjectURL(response);
      })
      .catch(error => {
        $message.error('获取验证码失败');
      });
}

const handleLogin = () => {
  if (activeLogin.value === 'account') {
    console.log('账号登录数据:', loginForm.value);
    axios.get("/user/login/username", {
      params: {username: loginForm.value.username, password: loginForm.value.password, code: loginForm.value.authCode}
    }).then(response => {
      let token = response.data;
      localStorage.setItem('Authorization', token)
      $message.success("登录成功")
      router.push('/home'); // 跳转到首页
    })
  } else if (activeLogin.value === 'phone') {
    console.log('手机号登录数据:', phoneForm.value);
    axios.get("/user/login/phone", {
      params: {phone: phoneForm.value.phone, code: phoneForm.value.phoneCode}
    }).then(response => {
      let token = response.data;
      console.log(token)
      localStorage.setItem('Authorization', token)
      $message.success("登录成功")
      router.push('/home'); // 跳转到首页
    })
  } else if (activeLogin.value === 'forgetPassword') {
    console.log('忘记密码数据:', forgetPasswordForm.value);
  } else if (activeLogin.value === 'register') {
    console.log('注册数据:', registerForm.value);
  }
  centerDialogVisible.value = false; // 关闭弹框
}

const handleForgetPassword = () => {
  console.log('开始处理忘记密码');
  axios.post('/user/updatePwd', forgetPasswordForm.value).then(response => {
    $message.success("密码修改成功")
  })
}

const handleRegister = () => {
  console.log('注册');
  axios.post('/user/register', registerForm.value)
      .then(response => {
        $message.success("注册成功")
      })
}
</script>

<style scoped>
/* 保持原有样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-around; /* 按钮均匀分布 */
  margin-bottom: 20px; /* 调整按钮与其他内容的间距 */
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f0f4f8;
}

.logo {
  font-size: 24px;
  color: #333;
}

.login-button {
  background-color: #409eff;
  color: #fff;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 64px);
  background-color: #eaf2f8;
}

.content {
  text-align: center;
}

.title {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 24px;
  color: #666;
  margin-bottom: 20px;
}

.description {
  font-size: 18px;
  color: #888;
}
</style>
  